<template>
  <el-container>
    <el-main>
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>用户查看</b></span>
            </div>
            <el-table
              @row-click="chooseUser"
              :data="tableData2"
              highlight-current-row
              border
              max-height="300"
              style="width: 100%; border-radius: 10px"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index"> </el-table-column>
              <el-table-column prop="id" label="ID"> </el-table-column>
              <el-table-column prop="username" label="username">
              </el-table-column>
              <el-table-column prop="mail" label="mail"> </el-table-column>
              <el-table-column prop="phonenumber" label="phonenumber">
              </el-table-column>
              <el-table-column prop="status" label="status"> </el-table-column>

              <el-table-column fixed="right" width="320">
                <template slot="header" slot-scope="scope">
                  <el-row gutter="10" type="flex" justify="space-between">
                    <el-col :span="18">
                      <el-input
                        style="margin-top: 11px"
                        :value="`用户id:${user_choosed}`"
                        size="small"
                        placeholder="未选择用户"
                        disabled
                      />
                    </el-col>
                    <el-col :span="6">
                      <el-button
                        style="margin-top: 10px"
                        size="small"
                        type="primary"
                        icon="el-icon-search"
                        @click="search"
                        >搜索</el-button
                      >
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>商品推荐</b></span>
            </div>
            <el-table
              :data="tableData"
              border
              max-height="300"
              style="width: 100%; border-radius: 10px"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableData2: [
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
      ],
      user_choosed: "",
    };
  },
  mounted() {
    this.show();
  },

  methods: {
    chooseUser(row) {
      console.log(row);
      this.user_choosed = row.id;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-row {
  margin-bottom: 20px;
}
.box-card3 {
  width: 1180px;
  border-radius: 20px;
  /* margin-top: 15px;
  margin-bottom: 15px; */
  margin: 15px auto;
}
</style>